<!--  -->
<template>
    <div>
      <template>
          <el-table
            :data="tableData"
            style="width: 90%">
            <el-table-column
              prop="ABid"
              label="序列号"
              width="180"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="BookName"
              label="预约书籍"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="UserAddress"
              label="用户地址"
              align="center">
            </el-table-column>
            <el-table-column
              prop="ApplyTime"
              label="预约时间"
              align="center">
            </el-table-column>
            <el-table-column
            align="center"
            label="预约状态"
            >
            <template slot-scope="scope">
              <span
                size="mini"
                align="center"
                v-if="scope.row.State == 0"
               >申请成功，请准时借阅</span>
              <span
                size="mini"
                align="center"
                v-if="scope.row.State == 1"
                style="color:red"
               >申请已被拒绝，请重新发起</span>
              <span
                size="mini"
                align="center"
                v-if="scope.row.State == 2"
                style="color:blue"
               >申请正在处理中，请稍等...</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
       background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-count="pagecount"
        :current-page="page"
        class="fenye">
        </el-pagination>
        </template>
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
        tableData:[],
        search:"",
         page:1,
        pagecount:0
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getApply(1)
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    
    },
    methods:{
        getApply(val){
                let userInfo=JSON.parse(localStorage.getItem("userInfo"));
                // console.log(userInfo)
               var url=`http://localhost:3000/ApplyRecord?page=${val}&name=${userInfo.uname}`
                this.axios.get(url).then(res=>{
                // console.log(res)
                this.tableData=res.data.results.datas
                this.page=res.data.results.page
              this.pagecount=res.data.results.pagecount
                })
        },
          handleCurrentChange(val){
          // console.log("点击上一页或者下一页按钮",val)
          this.getApply(val)
        },
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
      span{
        color:rgb(64, 100, 34);
        font-weight: 600;
      }
      .fenye{
            display: block;
            position: absolute;
            bottom: 20px;
            margin-left: 33%;
        }
    </style>